<template>
  <div class="app-container">
    <el-row type="flex" :gutter="20" justify="space-between">
      <el-col :span="4">
        <el-select v-model="curdeviceid" filterable placeholder="请选择">
          <el-option
            v-for="item in deviceArray"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="2" :offset="18">
        <el-button type="primary" style="width:100%;">添加</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table
        v-loading="listLoading"
        :data="tabledata"
        border
        fit
        highlight-current-row>
        <el-table-column label="DEVICE ID" min-width="15%" >
          <template slot-scope="scope">
           {{scope.row.id}}
          </template>
        </el-table-column>
        <el-table-column label="ADDRESS" min-width="10%">
           <template slot-scope="scope">
           {{scope.row.managementAdress}}
          </template>
        </el-table-column>
        <el-table-column label="PORTS" min-width="10%">
           <template slot-scope="scope">
           {{scope.row.portnum}}
          </template>
        </el-table-column>
        <el-table-column label="VENDOR" min-width="10%">
           <template slot-scope="scope">
           {{scope.row.vendor}}
          </template>
        </el-table-column>
        <el-table-column label="S/W VERSION" min-width="10%">
           <template slot-scope="scope">
           {{scope.row.version}}
          </template>
        </el-table-column>
        <el-table-column label="PROTOCOL" min-width="10%">
           <template slot-scope="scope">
           {{scope.row.protocol}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="Actions" width="200">
          <template slot-scope="scope">
            <router-link :to="'/userlist/edit/' + scope.row.userid">
              <el-button type="primary" size="mini" icon="el-icon-edit">Edit</el-button>
            </router-link>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="confirmDelete(scope.row)">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
import { getAllDevices } from '@/api/device'

export default {
  data() {
    return {
      tabledata: null,
      listLoading: true,
      tableTitle: [
        {prop:'id',label:'设备ID'},
        {prop:'managementAdress',label:'控制器地址'},
        {prop:'portnum',label:'端口数量'},
        {prop:'version',label:'协议版本'}
        ] ,
      curdeviceid: '0000',
      deviceArray: [
        { value: '0000', label: '设备0' },
        { value: '0001', label: '设备1' },
        { value: '0002', label: '设备2' },
        { value: '0003', label: '设备3' }
      ] 
      }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = false
        getAllDevices().then((response) => {
          console.log('response :>> ', response);
            let data = response.devices.map((item)=>{
                return{
                    id:item.id,
                    managementAdress:item.annotations.managementAddress,
                    protocol: item.annotations.protocol,
                    portnum:0,
                    vendor:item.mfr,
                    version:item.sw
                }
            })
            this.tabledata = data
            console.log('data :>> ', data);
            this.listLoading = false
        });
    },
    confirmDelete(row) {
      this.$confirm('此操作将永久删除' + row.username + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.doDelete(row)
        })
        .catch(() => {
          this.$message({
            type: 'success',
            message: '取消删除'
          })
        })
    },
    doDelete(row) {
      //   deleteSubuser(row.userid).then(response => {
      //     this.$message({
      //         type: 'success',
      //         message: '删除用户成功'
      //       });
      //     this.getUserList()
      //   }).catch(() => {
      //       this.$message({
      //         type: 'warning',
      //         message: '删除用户失败'
      //       });
      //     });
    }
  }
}
</script>

<style>
.el-row {
    margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;
    }
}
</style>
